<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
      </div>
    </template>

    <iframe id="myFrameId" :src="reqUrl" width="1160px" height="785px" scrolling="no"> </iframe>
  </a-drawer>
</template>

<script>
import Vue from 'vue'
import { getAction } from '@/api/manage'
import { TENANT_ID } from '@/store/mutation-types'

export default {
  name: 'AuthorizeModal',
  components: {},
  data() {
    return {
      visible: false,
      drawerWidth: 1210,
      title: '授权',
      reqUrl: '',
    }
  },
  created() {},
  methods: {
    authorize(model) {
      let that = this
      let tenantid = Vue.ls.get(TENANT_ID)
      let local = location.href
      that.visible = true
      let base = 'https://e.dianping.com/dz-open/merchant/auth'
      that.reqUrl =
        base +
        '?app_key=' +
        model.meituanAppKey +
        // +"&redirect_url="+local
        '&state=' +
        tenantid +
        '&scope=[%22tuangou%22]'

      window.addEventListener('message', function (event) {
        console.log(event)
        let authCode = event.data.auth_code
        if (authCode) {
          // 获取session
          getAction('/meituan/bisMeituanGoods/getSession', { authCode: authCode }).then((res) => {
            if (res.success) {
              that.handleCancel()
              that.$message.success(res.message)
            } else {
              that.handleCancel()
              that.$message.warning(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.$emit('close')
      this.visible = false
    },
  },
}
</script>